<template>
    <div class="reassign-item">
      <div class="bg-white">
        <div class="pull-left">
          <router-link class="client-desc" to="/client-detail">
            <span class="img-wrapper"><img data-object-fit="cover" :src="client.head_img_url" /></span>
            <span class="social-name">{{ client.nick_name }}</span>
            <span class="little-font grey">{{ client.location }}</span>
          </router-link>
          <div class="property-items">
            <router-link :to='client.source'>{{ client.source }}</router-link>
            <router-link :to='client.custom_property'>{{ client.custom_property | getUserByType }}</router-link>
            <router-link :to='client.custom_status'>{{ client.custom_status | getStatename }}</router-link>
          </div>
          <div class="rec-follow grey">最近跟进时间: {{client.last_contact_time}}</div>
          <!-- <div class="label-list">
            <label v-for="(label, index) in client.labels " :key="index" class="label-item">
              <router-link :to="label.link">{{ label.name }}</router-link>
            </label>
          </div> -->
        </div>
        <div class="pull-right">
          <span class="reassignBtn"  @click="assignUser(client.id)" >分配</span>
        </div>
      </div>
    </div>
</template>

<script>

var objectFitImages = require('object-fit-images');



  export default{
    props:{
      client: {
      type : Object,
      require: true
      }
    },
    data () {
      return {

      };
    },
    methods:{
    assignUser(clientID) {
      console.log(clientID, 'clientID...')
      this.$emit('on-click', clientID);
    }
    },

    components:{

    }
  }
</script>

<style lang="less">
  @import '../less/index.less';

  .reassign-item {
    background-color: white;
    padding: 15px;
    padding-left: 10px;

    .bg-white{
      padding-bottom: 15px;
      border-bottom: 1px solid #e0dcdc;
      &:extend(.clearfix all);
      display: flex;

      .pull-right{
        width: 30%;
        text-align: right;

         .reassignBtn {
         display: inline-block;
         margin-top: 50%;
         background-color: #35ADFF;
         width: 70px;
         text-align: center;
         color: white;
         font-size: 14px;
         border-radius: 2px;

         @reassignBtnSize: 32px;
         height: @reassignBtnSize;
         line-height: @reassignBtnSize;
         }

      }
    }

    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }


    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    a,a:hover,a:visited,a:focus{
      color:#323333;
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
      font-weight: bolder;
      margin-right: 10px;
    }

    .rec-follow{
      margin-bottom: 5px;
      font-size: 13px;
    }

    .property-items{
      margin:5px 0 0;

      a{
        display: inline-block;
        padding-right: 10px;
        line-height: 15px;
        height: 15px;
        font-size: 14px;
      }

      a:not(:first-child) {
        padding-left: 10px;
      }

      a:not(:last-child) {
        border-right: 1px solid #B2B2B2;
      }
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }


    .little-font{
      font-size: 12px;
    }


    .grey{
      color: #6B6B6B;
    }
  }
</style>
